<template>
	<view>
		<view class="title">
		    <view class="text">{{data.subtitle}}</view>
		    <view class="label" v-if="data.jude == 0">[进行中]</view>
             <view class="label" v-if="data.jude == 1">[已完成]</view>
              <view class="label" v-if="data.jude == 2">[未完成]</view>
		</view>
        <view class="title">
            <view class="page">{{data.message}}</view>
        </view>
        <view class="title"  @tap="previewimage(data.picture)" style="justify-content: flex-start;">
            <image :src="item" mode="aspectFill" :key="index" v-for="item in data.picture" style="height: 220upx;margin-right:15upx;width:220upx ; border-radius: 10upx;" :lazy-load="true"></image>
        </view>
        
        
        <view style="display: flex;flex-direction: row;background-color: #FEFEFE;padding-top: 30upx;padding-bottom: 20upx;">
            <view class="box">
             <text style="font-size: 30upx;color: #333333;text-align: center;">挑战积分</text>
            <text style="text-align: center;">{{data.integral }}</text>
            </view >
            <view class="box">
             <text  style="font-size: 30upx;color: #333333;text-align: center;">坚持天数</text>
            <text style="text-align: center;">{{data.signednum }}/{{data.signnum }}</text>
            </view>
           <view class="box"> 
            <text  style="font-size: 30upx;color: #333333;text-align: center;">围观</text>
           <text style="text-align: center;">{{data.circuessNum }}</text>
           </view>
            <view class="box">
             <text  style="font-size: 30upx;color: #333333;text-align: center;">打赏积分</text>
            <text style="text-align: center;"> {{data.rewardIntegral }}</text>
            </view>
        </view>
        <view style="font-size: 25upx;color:#358cbb;padding-left: 30upx;padding-bottom: 20upx;padding-top: 20upx;background-color: #FEFEFE;">
            如果目标挑战失败将损失{{data.integral }}积分
        </view>
        <view class="time">
            目标时间[{{data.startTime }} ~ {{data.finishTime  }}]
        </view>
        
        <view class="yaoqing" style="align-items: center;">
                <view style="width: 80upx;">
                    <image src="../../static/jiankong.png" mode="" style="width: 60upx;height: 60upx;"></image>
                </view>
                <view style="color: #333333;font-size: 30upx;">邀请监督人</view>
            </view>
        <view  style="padding-top: 10upx;padding-bottom: 20upx;display: flex;flex-direction: row;background-color: #FEFEFE;" >

               <scoll-view scroll-x="true"  v-if="data.goalSuperintendentsSet.length != 0" style="width:600upx;display: flex;flex-direction: row;" >
                       <view style="max-width: 180upx;padding-right: 25upx;padding-left: 25upx;min-width: 130upx;text-align: center;display: flex;flex-direction: column;" v-for="item in data.goalSuperintendentsSet">
                    <image :src="item.userHeadPortrait " mode="" style="height: 60upx;width: 60upx;border-radius: 1000upx;"></image>
                    <div style="text-align: center;">
                          <text style="color: #999999;font-size: 25upx;max-width: 100upx;">{{item.username}}</text>
                    </div>
                  
                </view>
               
               </scoll-view>
                <view class="" v-if="data.goalSuperintendentsSet.length == 0" style="width: 600upx;text-align: center;">
                    <text class="page">暂时没有监督人,点右边邀请</text>
                </view>
                <view style="padding-left: 30upx;">
                    <text class="cuIcon-roundadd" style="font-size: 50upx;font-weight: 500;"></text>
                </view>
         
        </view> 
        <view style="margin-top: 20upx;margin-bottom: 150upx;" >
            <view class="list"  v-for="item in comment" @tap="brief(item.id)">
                <text style="color: #333333;font-size: 30upx;padding-top: 10upx;">{{item.message}}</text>
                <view class="list-detail">
                    <text style="color:#999999;font-size:25upx;">{{item.date}}</text>
                    <text style="color:#999999;font-size:25upx;">{{item.whatTime}}(第{{item.signNum}}天签到)</text>
                   <view style="display: flex;flex-direction: row;align-items: center;">
                       <image src="../../static/index/aixin.png" mode="" style="width: 45upx;height: 45upx;"></image>
                       <text>{{item.thumb}}</text>
                   </view>
                   <view style="display: flex;flex-direction: row;align-items: center;">
                       <image src="../../static/comment.png" mode="" style="width: 45upx;height: 45upx;"></image>
                       <text style="padding-left: 10upx;">{{item.commentNum}}</text>
                   </view>
                </view>
                <view class="titles"  @tap.stop="previewimage(item.picture)" style="display: flex;flex-direction: row;">
                    <image :src="items" mode="aspectFill" :key="index" v-for="items in item.picture" style="height: 180upx;margin-right:30upx;width:180upx ; border-radius: 10upx;" :lazy-load="true"></image>
                </view>
            </view>
        </view>
       <view v-if="data.jude == 0">
       	<view class="bottom">
            <view v-if="data.signJude == 1">
            	<view style="width: 335upx;padding-right: 30upx;padding-left: 20upx;">
                <button class="button" style="height: 85upx;background-color: #007AFF;" @tap="check">今日签到</button>
            </view>
            </view>
            <view v-if="data.signJude == 0">
            	<view style="width: 335upx;padding-right: 30upx;padding-left: 20upx;">
                <button  style="height: 85upx;border-radius: 50upx;padding-bottom: 30upx;font-size: 35upx;font-weight: 800;width: 100%;color: #F7F7F7;background-color: #999999;" >已签到</button>
            </view>
            </view>
            <view style="width:335upx;padding-right:20upx;padding-left:30upx;">
                <button class="button" @tap="increasepoints">追加积分</button>
            </view>
        </view>
       </view>
        
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{
                
                    circuessNum: 0,
                    finishTime: "",
                    goalSuperintendentsSet: [],
                    iD: "",
                    integral: 10,
                    jude: 0,
                    message: "",
                    picture: [],
                    postHeadPortrait: "",
                    postUsername: "",
                    rewardIntegral: 10,
                    signednum: 0,
                    signnum: 7,
                    startTime: "",
                    subtitle: ""            
                },
                pageNum:1,
                comment:[],
                hasbottom:0,
                id:""
			}
		},
		methods: {
            
            //展示图片
			 previewimage(src){
			       
			         uni.previewImage({
			    urls: src,
			    indicator:"default",
			    loop:true,
			    success() {
			        console.log("图片打开成功")
			    }
			})        
			   },
               check(){
                   //跳转到签到页面
                   
                  let data =  this.data. iD
                  
                  console.log(data);
                   
                    uni.setStorageSync(
                        "qiandaoids",data )
                    
                    
                   uni.redirectTo({
                       url:"../checkin/checkin"
                   })
                   
                  
                   
               },
               getbrief(){
                    //获取签到信息
              
                   let c =this;
                   let pageNum = this.pageNum;
                   let id = this.id;
                   
                   this.$api.test({
                       url:"setgoals/getbrief",
                       data:{
                           id,
                           pageNum,
                           pageLimit:5
                       }
                   }).then((res) =>{
                     
                     if(res.data.length == 0){
                         c.hasbottom = 1;
                         return ;
                     }
                     
                     c.pageNum++;
                     
                     if(c.comment.length == 0){
                         
                         c.comment = res.data;
                     }
                     
                     if(c.comment.length != 0){
                         c.comment = c.comment.concat(res.data);
                     }
                     
                     console.log(res.data);
                   })
                   
   
               },
               //追加积分
             increasepoints(){
                 let c = this;
                 let id = this.id
                 plus.nativeUI.prompt("输入要增加的积分:", function(e){
                     
                let value =  parseInt(e.value)  
                     
                   if(e.index==0){
                       
                       
                       if( value > 0 && value < 100){
                           
                           c.$api.test({
                             url:"setgoals/Additionaloints",
                             data:{
                                 id,
                                 integral:e.value
                             }
                           }).then((res) =>{
                               
                                  if(res.data.statue == 0){
                                      console.log(c.data.integral)
                               c.data.integral   =   parseInt(c.data.integral) + value ;
                                  }
                           })
                           
       
                       }else{
                           
                           uni.showToast({
                               title: '输入有误',
                               duration: 2000,
                               icon: "none",
                               image: "../../static/setgoal/sigh.png"
                           });
                       }
                       
                       
                      
                       }
 
        
	},  "", "输入积分");
                 
             },
             
             
             //签到详细页面
             brief(briefId){
                 
                 let planId = this.id;
                 
               
                 
                 uni.navigateTo({
                     url:"../goaldetail/goaldetail?briefId="+briefId
                 })
                  
             }
             
		},
        onLoad() {
 
          //获取目标的id  
            let c = this;
           let id = uni.getStorageSync('id');
          this.id = id;
  uni.removeStorage({
      key: 'id',
      success: function (res) {
          console.log('success');
      }
  });
  
  console.log(id)
          //获取目标页的详细信息

          this.$api.test({
             url:"setgoals/getDetailplan",
             data:{
                 id
             }
          }).then((res) =>{
             console.log(res.data)
                          res.data.startTime =  res.data.startTime.split(" ")[0];
                            res.data.finishTime =  res.data.finishTime.split(" ")[0];
                          c.data = res.data;   
             
                             let name = c.data.postUsername;
             let picture = c.data.postHeadPortrait
              // uni.$emit('details',{name,picture,detail:1})
              
                 plus.webview.postMessageToUniNView({
                                name,picture,detail:1   
                               }, "goal");
              
          })  
            
            
          let pageNum = c.pageNum
          
          
         this.getbrief()
            
            
            
        },
        onShow() {
            
            uni.$once('back',function(data){
       uni.navigateBack({
             delta: 1
         });
    }) 
           
        },
        onReachBottom() {
            
            //上拉加载签到信息
            
            if(this.hasbottom == 1){
                return
            }
            
           this.getbrief()
        },
        // onBackPress(options) {  
        //    if(options.from === 'backbutton'){
        //       
        //       return false;  
        //    }
        //     uni.navigateBack({
        //            delta: 1
        //        });
        //        return true;  
        // }  
        
	}
</script>

<style>
   page{
       background-color:#f7f6fc;
   }
.title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-left: 30upx;
    padding-right: 30upx;
    padding-top: 20upx;
    background-color: #FEFEFE;
}
.titles{
    display: flex;
    flex-direction: row;
    padding-left: 30upx;
    padding-right: 30upx;
    margin-top: 20upx;
    background-color: #FEFEFE;
    flex-wrap: wrap;
}
.text{
    color: #333333;
    font-size: 30upx;
    font-weight: 800;
    width: 550upx;
}
.label{
    color: #fe9f1a;
    font-size: 30upx;
    font-weight: 800;
}
.page{
    color: #999999;
    font-size: 28upx;
}
.box{
    width: 190upx;
    border-right: #fe9f1a solid 5upx;
    padding-left: 30upx;
    padding-right: 30upx;
    
    display: flex;
    flex-direction: column;
}
.time{
    padding-top: 20upx;
    text-align: center;
    color: #333333;
    font-size: 30upx;
    padding-bottom: 20upx;
}
.yaoqing{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: 30upx;
    padding-top: 20upx;
    background-color: #FEFEFE;
}
.list{
     margin-top: 20upx;
    padding-bottom: 20upx;
    padding-left: 30upx;
    padding-right: 30upx;
     background-color: #FEFEFE;
     padding-top: 15upx;
}
.list-detail{
    padding-top: 8upx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 10upx;
}
.bottom{
   position: fixed;
   bottom: 0;
   display: flex;
   flex-direction: row;
   padding-left: 40upx;
   padding-right: 40upx;
   padding-bottom: 30upx;
   background-color: #FEFEFE;
   width: 750upx;
   padding-top: 20upx;
}
.button{
      background-color: #fe9f1a;
   border-radius: 50upx;
   height: 85upx;
   padding-bottom: 30upx;
   font-size: 35upx;
   font-weight: 800;
   color: white;
   width: 100%;
}
.list:active{
    background-color:#eaf0f9; 
}


</style>
